import React from 'react'
import { Header, RouterView } from 'src/components'
import { ORDER_SUCCESS, BUY_CART } from 'src/redux/action-type'
import { useDispatch, useSelector } from 'react-redux'
import { Link, useHistory } from 'react-router-dom'
import routerData from './routerData'
import './index.scss'

const Vipcard = () => {

    const { userInfo } = useSelector(state => state)
    const dispatch = useDispatch()
    const history = useHistory()
    const buyCart = () => {
        dispatch({
            type: ORDER_SUCCESS,
            order: '399525134200981325'
        })
        dispatch({
            type: BUY_CART,
            price: 20
        })
        history.push('/confirmOrder/payment');
    }

    return <div className="page_vipcard">
        <Header title="会员中心" goBack></Header>
        {
            userInfo && <section>
                <p className="buy_for">为账户 <span>{userInfo.username}</span> 购买会员</p>
                <section className="vip_prerogative">
                    <Link to="/vipcard/vipDescription" className="header_style">
                        <span className="header_left">会员特权</span>
                        <section className="header_right">
                            <span>会员说明</span>
                            <svg fill="#ccc">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                            </svg>
                        </section>
                    </Link>
                    <section className="vip_detail">
                        <div className="vip_detail_left">
                            <img src="/images/sheng.jpeg" height="80" width="70" alt=""/>
                        </div>
                        <div className="vip_detail_right">
                            <h4>减免配送费</h4>
                            <p>每月减免30单，每日可减免3单，每单最高减4元</p>
                            <p>蜂鸟专送专享</p>
                        </div>
                    </section>
                    <section className="vip_detail">
                        <div className="vip_detail_left">
                            <img src="/images/jifen.jpeg" height="80" width="70" alt=""/>
                        </div>
                        <div className="vip_detail_right">
                            <h4>减免配送费</h4>
                            <p>每月减免30单，每日可减免3单，每单最高减4元</p>
                            <p>蜂鸟专送专享</p>
                        </div>
                    </section>
                </section>
                <section className="apply_vip">
                    <header className="header_style">
                        <span className="header_left">开通会员</span>
                    </header>
                    <section className="apply_vip_buy">
                        <div className="apply_vip_buy_left">
                            <span>1个月</span>
                            <span> ¥20</span>
                        </div>
                        <div className="apply_vip_buy_right" onClick={buyCart}>购买</div>
                    </section>
                </section>
                <Link to="/vipcard/useCart" className="header_style common_style">
                    <span className="header_left">兑换会员</span>
                    <section className="header_right">
                        <span>使用卡号卡密</span>
                        <svg fill="#ccc">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                        </svg>
                    </section>
                </Link>
                <Link to="/vipcard/invoiceRecord" className="header_style common_style">
                    <span className="header_left">购买记录</span>
                    <section className="header_right">
                        <span>开发票</span>
                        <svg fill="#ccc">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                        </svg>
                    </section>
                </Link>
            </section>
        }
        <RouterView data={routerData} />
    </div>
}

export default Vipcard;